export default {
  name: 'WootTabs',
  props: {
    index: {
      type: Number,
      default: 0,
    },
    border: {
      type: Boolean,
      default: true,
    },
  },
  data () {
    return { hasScroll: false }
  },
  created () {
    window.addEventListener('resize', this.computeScrollWidth)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.computeScrollWidth)
  },
  mounted () {
    this.computeScrollWidth()
  },
  methods: {
    computeScrollWidth () {
      const tabElement = this.$el.getElementsByClassName('tabs')[0]
      this.hasScroll = tabElement.scrollWidth > tabElement.clientWidth
    },
    onScrollClick (direction) {
      const tabElement = this.$el.getElementsByClassName('tabs')[0]
      let scrollPosition = tabElement.scrollLeft
      if (direction === 'left') {
        scrollPosition -= 100
      } else {
        scrollPosition += 100
      }
      tabElement.scrollTo({
        top: 0,
        left: scrollPosition,
        behavior: 'smooth',
      })
    },
    createScrollButton (createElement, direction) {
      if (!this.hasScroll) {
        return false
      }
      return createElement(
        'button',
        {
          class: 'tabs--scroll-button button clear secondary button--only-icon',
          on: { click: () => this.onScrollClick(direction) },
        },
        [
          createElement('fluent-icon', {
            props: { icon: `chevron-${direction}`, size: 16 },
          }),
        ]
      )
    },
  },
  render (createElement) {
    const Tabs = this.$slots.default
      .filter(
        node =>
          node.componentOptions &&
          node.componentOptions.tag === 'woot-tabs-item'
      )
      .map((node, index) => {
        const data = node.componentOptions.propsData
        data.index = index
        return node
      })
    const leftButton = this.createScrollButton(createElement, 'left')
    const rightButton = this.createScrollButton(createElement, 'right')
    return (
      <div
        class={{
          'tabs--container--with-border': this.border,
          'tabs--container': true,
        }}
      >
        {leftButton}
        <ul class={{ tabs: true, 'tabs--with-scroll': this.hasScroll }}>
          {Tabs}
        </ul>
        {rightButton}
      </div>
    )
  },
}
